<template>
	<el-cascader filterable :placeholder="item.hint" class="width-full__cascader" @visible-change="handleVisible" ref="field" :disabled="disabled" :clearable="true" :props="{value: 'key', label: 'value', checkStrictly: true}" :value="value" :options="options" @change="changeValue">
	</el-cascader>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import widgetCommon from '../common/widgetCommon';
// eslint-disable-next-line no-restricted-imports
import { cloneDeep } from 'lodash';
function filterOptions (options) {
  return options.filter((item) => {
    if (item.isDelete !== 1) {
      const children = filterOptions(item.children || []);
      item.children = children.length ? children : null;
      return true;
    }
  });
}
@Component({
  name: 'cascaderField',
  components: {}
})
export default class extends Mixins(widgetCommon) {
  private get options () {
    return filterOptions(cloneDeep(this.item.cascadeOptions));
  }

  private handleVisible (visible) {
    this.$nextTick(() => {
      if (!visible) {
        this.blur();
      }
    });
  }
}
</script>
<style scoped lang="stylus">
.width-full__cascader {
	height: 100%
	width 100%
	vertical-align: top
}
</style>
